<template>
	<view class="content">
		<view class="content_order">
			<view class="top_tabbar">
				<text @click="handleTabbar" data-val="1" :class="{'tabber1':bannerShow1}">外卖订单</text>
				<text @click="handleTabbar" data-val="2" :class="{'tabber1':bannerShow2}">堂食订单</text>
			</view>
			<view class="order_box">
				<view class="order_top">
					<view class="tit_val" @click="gotoOrderdetails">
						<view class="title">
							<text>明飞餐厅</text>
						</view>
						<view class="order_list">
							<scroll-view class="scroll-view_H" scroll-x enable-flex :bindscroll="scroll"
								style="width: 70%">
								<view class="order1">
									<image style="width: 128rpx;height: 96rpx;display: block;"
										src="../../static/img/food1.png" mode=""></image>
									<text class="qiguoji">椒盐麻辣红烧汽锅鸡</text>
								</view>
								<view class="order1">
									<image style="width: 128rpx;height: 96rpx;display: block;"
										src="../../static/img/food1.png" mode=""></image>
									<text class="qiguoji">汽锅鸡</text>
								</view>
								<view class="order1">
									<image style="width: 128rpx;height: 96rpx;display: block;"
										src="../../static/img/food1.png" mode=""></image>
									<text class="qiguoji">汽锅鸡</text>
								</view>
								<view class="order1">
									<image style="width: 128rpx;height: 96rpx;display: block;"
										src="../../static/img/food1.png" mode=""></image>
									<text class="qiguoji">汽锅鸡</text>
								</view>
								<view class="order1">
									<image style="width: 128rpx;height: 96rpx;display: block;"
										src="../../static/img/food1.png" mode=""></image>
									<text class="qiguoji">汽锅鸡</text>
								</view>
								<view class="order1">
									<image style="width: 128rpx;height: 96rpx;display: block;"
										src="../../static/img/food1.png" mode=""></image>
									<text class="qiguoji">汽锅鸡</text>
								</view>
							</scroll-view>
						</view>
						<view class="time">
							<text style="margin-right: 20rpx;">外卖</text>
							<text>2024.07-17 15:57:31</text>
						</view>
					</view>
					<view class="price">
						<view>待支付</view>
						<view style="margin-top: 116rpx;">￥128.00</view>
						<view>共2件</view>
					</view>
				</view>
				<view class="order_btn">
					<u-button type="success" :customStyle="customStyles1" :plain="true">取消订单</u-button>
					<u-button type="success" :customStyle="customStyles2">立即支付</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerShow1: true,
				bannerShow2: false,
				customStyles1: {
					width: '188rpx',
					height: '64rpx',
					marginTop: '25rpx',
					fontSize: "28rpx",
					fontWeight: "400",
					color: '#333333',
				},
				customStyles2: {
					width: '188rpx',
					height: '64rpx',
					marginTop: '25rpx',
					fontSize: "28rpx",
					fontWeight: "400",
					color: 'white',
				}
			}
		},
		onLoad() {

		},
		methods: {
			handleTabbar(e) {
				console.log(111, e);
				if (e.target.dataset.val == 1) {
					this.bannerShow2 = false
					this.bannerShow1 = true
				} else if (e.target.dataset.val == 2) {
					this.bannerShow1 = false
					this.bannerShow2 = true
				}
			},
			gotoOrderdetails(){
				uni.navigateTo({
					url:'/homepage/orderdetails/orderdetails'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content_order {
		width: 710rpx;
		height: 100vh;
		margin: auto;
		padding-top: 50rpx;
	}

	.top_tabbar {
		display: flex;
		text-align: center;

		.waimai {
			flex: 1;
		}

		text {
			width: 355rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bolder;
			font-size: 28rpx;
			color: #333333;
		}

		.tangshi {
			flex: 1;
		}
	}

	.tabber1 {
		width: 355rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}

	.tabber2 {
		width: 355rpx;
		height: 100rpx;
		background: #F5F5F5;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}

	.order_box {
		margin-bottom: 30rpx;
		height: 355rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		padding: 20rpx;

		.title {
			width: 112rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 20rpx;
		}

		.scroll-view_H {
			white-space: nowrap;
		}

		.qiguoji {
			display: block;
			width: 128rpx;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7E7E7E;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出的内容 */
			text-overflow: ellipsis;
			/* 超出的部分显示为省略号 */
		}

		.tit_val {
			width: 556rpx;
		}

		.order_list {
			display: flex;
			width: 586rpx;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出的内容 */
			text-overflow: ellipsis;
			/* 超出的部分显示为省略号 */
		}

		.order1 {
			margin-right: 16rpx;
			display: inline-block;
		}

		.order_top {
			display: flex;
		}

		.time {
			width: 316rpx;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 15rpx;
		}

		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 38rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.order_btn {
			margin-left: 286rpx;
			margin-top: 24rpx;
			width: 416rpx;
			display: flex;
		}
	}
</style>